import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from '../../models/User';
import { Loginauth } from '../../service/loginauth';
import { AssetService } from '../../service/assetService';
import { Asset } from '../../models/Asset';
import * as echarts from 'echarts';
declare var $: any;

@Component({
  templateUrl: './indexpage.html',
  styleUrls: ['./indexpage.css']
})
export class IndexpageComponent implements OnInit {

  @ViewChild('echart')
  echart: ElementRef;
  isAdmin: boolean;
  isGuest: boolean;
  assets: Asset[];
  idleassets: Asset[];
  useassets: Asset[];
  repairassets: Asset[];
  abondonassets: Asset[];
  page = 1;
  pageSize = 10;
  assetsnumber: number;
  assetsPrice: number = 0;
  idlenumber: number;
  idlePrice: number = 0;
  usenumber: number;
  usePrice: number = 0;
  repairnumber: number;
  repairPrice: number = 0;
  abondonnumber: number;
  abondonPrice: number = 0;
  options: any;
  assetsnames: Asset[];
  assetnamedata: any = [];
  assetnumdata: any = [];
  constructor(private route: ActivatedRoute, private loginauth: Loginauth, private assetService: AssetService) {

  }
  ngOnInit() {
    this.loginauth.checkAdmin().subscribe((isadmin) => {
      this.isAdmin = isadmin;
    })
    this.loginauth.checkGuest().subscribe((isguest) => {
      this.isGuest = isguest;
    })
    if (this.isAdmin || this.isGuest) {
      this.assetService.getbyassetname().subscribe((res) => {
        this.assetsnames = res.res;
        this.assetsnames.forEach((assetname) => {
          this.assetnamedata.push(assetname.assetName);
          this.assetnumdata.push(assetname.assetNum);
        })
        const barChart = echarts.init(document.getElementById('bar'));
        const baroption = {
          title: {
            text: '资产分类'
          },
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              data : this.assetnamedata,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                rotate: -30
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              type: 'bar',
              barWidth: '60%',
              data: this.assetnumdata,
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        barChart.setOption(baroption);
      });
    }

    // const pieChart = echarts.init(document.getElementById('pie'));
    // const pieoption = {
    //   tooltip : {
    //     trigger: 'item',
    //     formatter: '{a} <br/>{b} : {c} ({d}%)'
    //   },
    //   legend: {
    //     orient: 'vertical',
    //     left: 'left',
    //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    //   },
    //   series : [
    //     {
    //       name: '访问来源',
    //       type: 'pie',
    //       radius : '55%',
    //       center: ['50%', '60%'],
    //       data: [
    //         {value: 335, name: '直接访问'},
    //         {value: 310, name: '邮件营销'},
    //         {value: 234, name: '联盟广告'},
    //         {value: 135, name: '视频广告'},
    //         {value: 1548, name: '搜索引擎'}
    //       ],
    //       itemStyle: {
    //         emphasis: {
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: 'rgba(0, 0, 0, 0.5)'
    //         }
    //       }
    //     }
    //   ]
    // };
    // pieChart.setOption(pieoption);
    this.assetService.getAssets(this.page, 9999999).subscribe((res) => {
      if (res.success) {
        this.assetsnumber = Number(res.total);
        this.assets = res.res;
        this.assets.forEach((result) => {
          this.assetsPrice += (Number(result.assetPrice));
        });
      }
      this.assetsPrice = Math.ceil(this.assetsPrice);
    })

    const idleoptions: any = {};
    idleoptions.assetStatus = 0;
    this.assetService.getAssets(this.page, 9999999, idleoptions).subscribe((res) => {
      if (res.success) {
        this.idlenumber = Number(res.total);
        this.idleassets = res.res;
        this.idleassets.forEach((result) => {
          this.idlePrice += (Number(result.assetPrice));
        })
      }
      this.idlePrice = Math.ceil(this.idlePrice);
    })


    const useoptions: any = {};
    useoptions.assetStatus = 1;
    this.assetService.getAssets(this.page, 9999999, useoptions).subscribe((res) => {
      if (res.success) {
        this.usenumber = Number(res.total);
        this.useassets = res.res;
        this.useassets.forEach((result) => {
          this.usePrice += (Number(result.assetPrice));
        })
      }
      this.usePrice = Math.ceil(this.usePrice);
    })


    const repairoptions: any = {};
    repairoptions.repairStatus = 2;
    this.assetService.getAssets(this.page, 9999999, repairoptions).subscribe((res) => {
      if (res.success) {
        this.repairnumber = Number(res.total);
        this.repairassets = res.res;
        this.repairassets.forEach((result) => {
          this.repairPrice += (Number(result.assetPrice));
        })
      }
      this.repairPrice = Math.ceil(this.repairPrice);
    })


    const abondonoptions: any = {};
    abondonoptions.repairStatus = 3;
    this.assetService.getAssets(this.page, 9999999, abondonoptions).subscribe((res) => {
      if (res.success) {
        this.abondonnumber = Number(res.total);
        this.abondonassets = res.res;
        this.abondonassets.forEach((result) => {
          this.abondonPrice += (Number(result.assetPrice));
        })
      }
      this.abondonPrice = Math.ceil(this.abondonPrice);
    })
  }

}
